<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../../css/utils/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/utils/bootstrap-datetimepicker.css" />
    <link rel="stylesheet" href="../../css/utils/toastr.min.css" />
    <link rel="stylesheet" href="../../css/utils/common.css" />
	<title></title>
	<style>
		.form-group label {
			color: #666;
		}
		.statistics-list {
			display: flex;
			justify-content:space-between;
			margin: 80px 50px 0 50px;
		}
		.li-content {
			text-align: center;
		}
		.font-content {
			margin-top: 5px;
			color: #333333;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="form-inline">
			<div class="form-group col-sm-3">
				<label for="startDateTime">开始时间：</label>
				<input id="startDateTime" value="" class="form-control" type="text" value="" readonly="readonly" />
			</div>
		  	<div class="form-group col-sm-3">
				<label for="endDateTime">结束时间：</label>
				<input id="endDateTime" class="form-control" type="text" value="" readonly="readonly" />
			</div>
			<div id="showDepartment" class="form-group col-sm-3">
				<label for="departmentSt">部门选择：</label>
				<select id="departmentSt" class="form-control">
					<option value="">--全部部门--</option>
				</select>
			</div>
			<div class="form-group col-sm-3">
				<button type="button" id="queryStatistics" style="width: 120px;" class="btn btn-default btn-theme">查询</button>
			</div>
			<div style="clear: both;"></div>
		</div>
		<div class="statistics-list">
			<div class="li-content">
				<img src="../../img/customerStatistics/arcticle-number.png" />
				<div class="font-content">推广文章数：<span id="totalNumber"></span></div>
			</div>
			<div class="li-content">
				<img src="../../img/customerStatistics/conversionThan.png" />
				<div class="font-content">软文转化率：<span id="conversionThan"></span></div>
			</div>
			<div class="li-content">
				<img src="../../img/customerStatistics/redPackedThan.png" />
				<div class="font-content">红包占比：<span id="redPackThan"></span></div>
			</div>
		</div>
	</div>	
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/jquery.cookie.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap-datetimepicker.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap-datetimepicker.fr.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
	<script type="text/javascript" src="../../js/utils/toastr.min.js" ></script>
	<script type="text/javascript">
		document.write('<script type="text/javascript" src="../../js/utils/boot.js?v='+new Date().getTime()+'" ><\/script>');
	</script>
	<script>
		var userID,companyID,roleType;
		$(function(){
			userID = $.cookie("userID");
			companyID = $.cookie("companyID");
			roleType = $.cookie("roleType");
			toastr.options = {
                "timeOut": 2000,
                "positionClass": "toast-middle-center"
            };
			initDataTime();
			if (roleType == 1) {
				base.postData(base.url.getDepartAndEmployeeList, {userID:userID,companyID:companyID}, callbackGetDepartAndEmployeeList);
			}else{
				$("#showDepartment").hide();
				initStatistics();
			}
		});
		function callbackGetDepartAndEmployeeList(data) {
			if (data.success) {
				var departList = data.context.departList;
		        var options 
		        for (var i=0; i<departList.length; i++) {
		            options += '<option value="'+departList[i].departID+'">'+departList[i].departName+'</option>';
		        }
				
				$("#departmentSt").append(options);
				initStatistics();
			} else {
				toastr.warning(data.msg);
			}
		}
		function initStatistics(){
			var data = {
				userID:userID,
				companyID:companyID,
				sectionID:$("#departmentSt").val(),
				timeLowerLimit:$("#startDateTime").val(),
				timeUpperLimit:$("#endDateTime").val(),
				roleType:roleType
			}
			base.postData(base.url.totalArticleStatistics, data, callbackTotalArticleStatistics);
		}
		function callbackTotalArticleStatistics(data){
			if (data.success){
				$("#totalNumber").text(data.context.number);
				$("#conversionThan").text(data.context.conversion);
				$("#redPackThan").text(data.context.redPack);
			} else {
				toastr.warning(data.msg);
			}
		}
		function initDataTime(){
			$('#startDateTime').val(addDate(base.getNowFormatToday(),-30));
			$('#endDateTime').val(base.getNowFormatToday());
			$('#startDateTime').datetimepicker({
				format:'yyyy-mm-dd',
				language:'zh-CN',
		        weekStart: 1,
		        todayBtn:  true,
				autoclose: true,
				startView: 2,
				minView: 2,
				forceParse: 0,
		        showMeridian: true
			});		
			$('#endDateTime').datetimepicker({
				format:'yyyy-mm-dd',
				language:'zh-CN',
		        weekStart: 1,
		        todayBtn:  true,
				autoclose: true,
				startView: 2,
				minView: 2,
				forceParse: 0,
		        showMeridian: true
			});
		}
		$("#queryStatistics").click(function(){
			initStatistics();
		});
		function addDate(date,days){ 
	       	var d=new Date(date); 
	       	d.setDate(d.getDate()+days); 
	       	var month=d.getMonth()+1; 
	       	var strDate = d.getDate();
	       	if (month >= 1 && month <= 9) {
		        month = "0" + month;
		   	}
		    if (strDate >= 0 && strDate <= 9) {
		        strDate = "0" + strDate;
		   	}
	       	return d.getFullYear()+'-'+month+'-'+strDate; 
	    }
	</script>
</body>
</html>
